<template>
    <el-dialog width="345px" title="照片" :model-value="modelValue" @closed="handleClose">
        <el-form ref="addFormRef" :model="addForm" label-position="top" :rules="addFormRulesData" class="photo-form">
            <el-form-item label="在刊时间" prop="publishingDate">
                <el-date-picker
                    v-model="addForm.publishingDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="YYYY-MM-DD"
                    :disabled-date="disabledDate"
                    @change="getChangnPlan"
                />
            </el-form-item>
            <el-form-item label="选择方案" prop="planIds">
                <el-select v-model="addForm.planIds" placeholder="请选择" multiple filterable>
                    <el-option v-for="(item, key) in planList" :key="key" :label="item.planName" :value="item.planId">
                        <span>{{ item.planName }}</span>
                        <span>（{{ mediaType[item.saleSystem + 1] }}）</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="拍照要求" prop="bizType">
                <el-select v-model="addForm.bizType" placeholder="请选择">
                    <el-option v-for="(item, key) in bizTypeList" :key="key" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="照片水印日期" prop="photoMarkDate">
                <el-date-picker
                    v-model="addForm.photoMarkDate"
                    :disabled-date="disabledDate"
                    type="date"
                    placeholder="选择日期"
                    value-format="YYYY-MM-DD"
                />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button size="large" @click="handleClose">取消</el-button>
                <el-button size="large" type="primary" :loading="btnLoading" @click="submit">推送重拍任务</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed, reactive, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { publishingPlant, reshootPushout } from '@/api/advertisingPush';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import { addRephotoFormRules } from './rules.ts';
import type { FormInstance, FormRules } from 'element-plus';
import { validateForm } from '@/utils/common';
import { bizTypeList } from '@/utils/config.ts';
import { mediaType } from '@/utils/config.ts';

const store = useStore();
const userInfo = computed(() => store.state.userGroup.userInfo);
const emits = defineEmits<{(e: 'update:modelValue', visible: boolean): void; (e: 'success'): void }>();
const addFormRef = ref<FormInstance>();
const addFormRulesData = reactive<FormRules>(addRephotoFormRules);
const addForm = reactive({
    bizType: 1,
    city: userInfo.value.cityList[0].cityCode,
    photoMarkDate: dayjs().format('YYYY-MM-DD'),
    planIds: [],
    pushUserId: userInfo.value.userId,
    pushUser: userInfo.value.realName,
    supplier: userInfo.value.groupCode,
    publishingDate: dayjs().format('YYYY-MM-DD'),
});
const planList = ref<any>([]);
const btnLoading = ref(false);
const disabledDate = (date: Date) => dayjs(date).isAfter(dayjs(), 'day');
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
});

const getChangnPlan = async () => {
    let param = { city: addForm.city, supplier: addForm.supplier, publishingDate: addForm.publishingDate };
    planList.value = await publishingPlant(param);

    console.log('planlist', planList.value);
};
onMounted(() => {
    getChangnPlan();
});
const handleClose = () => {
    emits('update:modelValue', false);
};

watch(
    () => addForm.publishingDate,
    () => {
        addForm.planIds = [];
    }
);
const submit = async () => {
    await validateForm(addFormRef.value);
    btnLoading.value = true;
    try {
        await reshootPushout(addForm);
    } finally {
        btnLoading.value = false;
    }

    handleClose();
    emits('success');
};
</script>

<style lang="scss" scoped>
.photo-form {
    .el-form-item {
        margin-bottom: 20px;
        :deep(.el-form-item__content) {
            width: 280px;
        }
        :deep(.el-input) {
            width: 280px;
        }
    }
}
</style>
